<%@ include file="/common/taglibs.jsp" %>
<head>
    <title><fmt:message key="signup.title"/></title>
    <link rel="stylesheet" type="text/css" media="all" href="<c:url value='/scripts/datepicker/css/datepicker.css'/>" />
</head>
<script src="<c:url value="/scripts/datepicker/js/bootstrap-datepicker.js"/>"></script>

<style>
/* .control-label */
/* { */
/* 	width : 100px !important; */
/* } */

.controls
{
	margin-left : 5px !important;
}
.accordion-heading
{
	font-size:17px;
	//line-height:20px;
}
.form-actions
{
	padding: 19px 0px 20px !important;
}

.full-input
{
	width:95.3%;
}

.gender{
	width:98.3%;
}

select{
	width:99.3%;
}



</style>
<div class="row-fluid">
    <h4><fmt:message key="signup.heading"/></h4>
    <p class="pull-left"><fmt:message key="signup.message"/></p>
</div>
<div class="row-fluid">
    <spring:bind path="user.*">
        <c:if test="${not empty status.errorMessages}">
            <div class="alert alert-error fade in">
                <a href="#" data-dismiss="alert" class="close">&times;</a>
                <c:forEach var="error" items="${status.errorMessages}">
                    <c:out value="${error}" escapeXml="false"/><br/>
                </c:forEach>
            </div>
        </c:if>
    </spring:bind>

    <form:form commandName="user" method="post" action="signup" id="signupForm" autocomplete="off"
               cssClass="well form-horizontal" onsubmit="return validateUser(this)">
        
        <div class="row-fluid">
        	<div class="span6">
		        <spring:bind path="user.firstName">
		        <fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
		        </spring:bind>
<%-- 		            <appfuse:label styleClass="control-label" key="user.firstName"/> --%>
					<c:set var="lbfirstname">
						<fmt:message key="user.firstName"/>
					</c:set>
		            <div class="controls">
		                <form:input path="firstName" id="firstName" maxlength="50" placeholder="${lbfirstname}"/>
		                <form:errors path="firstName" cssClass="help-inline"/>
		            </div>
		        </fieldset>
        	</div>
        	<div class="span6">
		        <spring:bind path="user.lastName">
		        <fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
		        </spring:bind>
	<%-- 	            <appfuse:label styleClass="control-label" key="user.lastName"/> --%>
					<c:set var="lblastname">
							<fmt:message key="user.lastName"/>
						</c:set>
		            <div class="controls">
		                <form:input path="lastName" id="lastName" maxlength="50" placeholder="${lblastname}"/>
		                <form:errors path="lastName" cssClass="help-inline"/>
		            </div>
		        </fieldset>
        	</div>
        </div>
        
        <spring:bind path="user.username">
        <fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
        </spring:bind>
        	<c:set var="lbusername">
        		<fmt:message key="user.username"/>
        	</c:set>
<%--             <appfuse:label styleClass="control-label" key="user.username"/> --%>
            <div class="controls">
                <form:input path="username" id="username" placeholder="${lbusername}" class="full-input"/>
                <form:errors path="username" cssClass="help-inline"/>
            </div>
        </fieldset>
        
        <div class="row-fluid">
        	<div class="span6">
		        <spring:bind path="user.password">
		        <fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
		        </spring:bind>
		        	<c:set var="lbpassword">
		        		<fmt:message key="user.password"/>
		        	</c:set>
<%-- 		            <appfuse:label styleClass="control-label" key="user.password"/> --%>
		            <div class="controls">
		                <form:password path="password" id="password" showPassword="true" placeholder="${lbpassword}"/>
		                <form:errors path="password" cssClass="help-inline"/>
		            </div>
		        </fieldset>
        	</div>
        	<div class="span6">
		        <spring:bind path="user.confirmPassword">
		        <fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
		        </spring:bind>
<%-- 		            <appfuse:label styleClass="control-label" key="user.confirmPassword"/> --%>
					<c:set var="lbrepassword">
		        		<fmt:message key="user.confirmPassword"/>
		        	</c:set>
		            <div class="controls">
		                <form:password path="confirmPassword" id="confirmPassword" showPassword="true" placeholder="${lbrepassword}"/>
		                <form:errors path="confirmPassword" cssClass="help-inline"/>
		            </div>
		        </fieldset>
        	</div>
        </div>
<%--         <spring:bind path="user.passwordHint"> --%>
<%--         <fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}"> --%>
<%--         </spring:bind> --%>
<%--             <appfuse:label styleClass="control-label" key="user.passwordHint"/> --%>
<!--             <div class="controls"> -->
<%--                 <form:input path="passwordHint" id="passwordHint"/> --%>
<%--                 <form:errors path="passwordHint" cssClass="help-inline"/> --%>
<!--             </div> -->
<!--         </fieldset> -->
        
        <spring:bind path="user.email">
        <fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
        </spring:bind>
<%--             <appfuse:label styleClass="control-label" key="user.email"/> --%>
            <c:set var="lbemail">
        		<fmt:message key="user.email"/>
        	</c:set>
            <div class="controls">
                <form:input path="email" id="email" placeholder="${lbemail}" class="full-input"/>
                <form:errors path="email" cssClass="help-inline"/>
            </div>
        </fieldset>
        
        <fieldset>
        	<legend class="accordion-heading">
        		<a data-toggle="collapse" href="#collapse-optional"><fmt:message key="user.optional"/></a>
        	</legend>
        	<div id="collapse-optional" class="accordion-body collapse">
<!--         		<div class="row-fluid"> -->
<%--         			<label><fmt:message key="user.dob"/></label> --%>
<!--         		</div> -->
        		<div class="row-fluid">
        			<div class="span6">
	        			<fieldset class="control-group">
	        				<div class="controls">
	        					<div class="input-append date" id="dob" data-date="" data-date-format="dd-mm-yyyy">
	    							<input class="span10" size="18" type="text" value="" placeholder="<fmt:message key="user.dob"/>" readonly="readonly"/>
	    							<span class="add-on"><i class="icon-calendar"></i></span>
								</div>   
		                    </div>
	        			</fieldset>
        			</div>
        			<div class="span6">
        				<fieldset class="control-group">
        					<c:set var="lbmale" >
        						<fmt:message key="user.gender.male"/>
        					</c:set>
        					<c:set var="lbfemale">
        						<fmt:message key="user.gender.female"/>
        					</c:set>
        					<c:set var="lbgender">
        						<fmt:message key="user.gender"/>
        					</c:set>
        					<div class="controls">
        						<form:select path="gender" cssClass="gender">
        							<form:option value="" label="-${lbgender}-"></form:option>
        							<form:option value="m" label="${lbmale}"></form:option>
        							<form:option value="f" label="${lbfemale}"></form:option>
        						</form:select>
        					</div>
        				</fieldset>
        			</div>
        		</div>
        		<div class="row-fluid">
        			<div class="span6">
        				<fieldset class="control-group">
		        			<c:set var="lbpasswordhint">
				        		<fmt:message key="user.passwordHint"/>
				        	</c:set>
		<%-- 		            <appfuse:label styleClass="control-label" key="user.passwordHint"/> --%>
				            <div class="controls">
				                <form:input path="passwordHint" id="passwordHint" placeholder="${lbpasswordhint}"/>
				            </div>
		       		 	</fieldset>
        			</div>
        			<div class="span6">
        				<fieldset class="control-group">
		<%--             		<appfuse:label styleClass="control-label" key="user.phoneNumber"/> --%>
		            		<c:set var="lbphone">
				        		<fmt:message key="user.phoneNumber"/>
				        	</c:set>
		            		<div class="controls">
		                		<form:input path="phoneNumber" id="phoneNumber" placeholder="${lbphone}"/>
		            		</div>
		        		</fieldset>
        			</div>
        		</div>
        		<div class="row-fluid">
        			<fieldset class="control-group">
<%-- 	                    <appfuse:label styleClass="control-label" key="user.address.address"/> --%>
						<c:set var="lbaddress">
			        		<fmt:message key="user.address.address"/>
			        	</c:set>
	                    <div class="controls">
	                        <form:input path="address.address" id="address.address" placeholder="${lbaddress}" class="full-input"/>
	                    </div>
	                </fieldset>
        		</div>
        		<div class="row-fluid">
        			<div class="span6">
        				<fieldset class="control-group">
<%-- 		                   <appfuse:label styleClass="control-label" key="user.address.city"/> --%>
							<c:set var="lbcity">
				        		<fmt:message key="user.address.city"/>
				        	</c:set>
		                   <div class="controls">
		                       <form:input path="address.city" id="address.city" placeholder="${lbcity}"/>
		                   </div>
		               	</fieldset>
        			</div>
        			<div class="span6">
        				<fieldset class="control-group">
<%-- 		                    <appfuse:label styleClass="control-label" key="user.address.province"/> --%>
		                    <c:set var="lbprovince">
				        		<fmt:message key="user.address.province"/>
				        	</c:set>
		                    <div class="controls">
		                        <form:input path="address.province" id="address.province" placeholder="${lbprovince}"/>
		                    </div>
		                </fieldset>
        			</div>
        		</div>
        		<div class="row-fluid">
        			<div class="span6">
        				<fieldset class="control-group">
<%-- 		                    <appfuse:label styleClass="control-label" key="user.address.postalCode"/> --%>
		                    <c:set var="lbpostalcode">
				        		<fmt:message key="user.address.postalCode"/>
				        	</c:set>
		                    <div class="controls">
		                        <form:input path="address.postalCode" id="address.postalCode" placeholder="${lbpostalcode}"/>
		                    </div>
		                </fieldset>
        			</div>
        			<div class="span6">
        				
        			</div>
        		</div>
        		
        		<fieldset class="control-group">
<%-- 		                    <appfuse:label styleClass="control-label" key="user.address.country"/> --%>
		                    <c:set var="lbcountry">
				        		<fmt:message key="user.address.country"/>
				        	</c:set>
		                    <div class="controls">
		                        <appfuse:country name="address.country" prompt="-${lbcountry}-" default="" />
		                    </div>
		                </fieldset>
		                
<!--         		<fieldset class="control-group"> -->
<%-- 		            <appfuse:label styleClass="control-label" key="user.website"/> --%>
<!-- 		            <div class="controls"> -->
<%-- 		                <form:input path="website" id="website"/> --%>
<!-- 		            </div> -->
<!-- 		        </fieldset> -->
		        
                
                
               
                
        	</div>
        </fieldset>
<!--         <fieldset> -->
<!--             <legend class="accordion-heading"> -->
<%--                 <a data-toggle="collapse" href="#collapse-address"><fmt:message key="user.address.address"/></a> --%>
<!--             </legend> -->
<!--             <div id="collapse-address" class="accordion-body collapse"> -->
<!--                 <fieldset class="control-group"> -->
<%--                     <appfuse:label styleClass="control-label" key="user.address.address"/> --%>
<!--                     <div class="controls"> -->
<%--                         <form:input path="address.address" id="address.address"/> --%>
<!--                     </div> -->
<!--                 </fieldset> -->
<!--                 <fieldset class="control-group"> -->
<%--                     <appfuse:label styleClass="control-label" key="user.address.city"/> --%>
<!--                     <div class="controls"> -->
<%--                         <form:input path="address.city" id="address.city"/> --%>
<!--                     </div> -->
<!--                 </fieldset> -->
<!--                 <fieldset class="control-group"> -->
<%--                     <appfuse:label styleClass="control-label" key="user.address.province"/> --%>
<!--                     <div class="controls"> -->
<%--                         <form:input path="address.province" id="address.province"/> --%>
<!--                     </div> -->
<!--                 </fieldset> -->
<!--                 <fieldset class="control-group"> -->
<%--                     <appfuse:label styleClass="control-label" key="user.address.postalCode"/> --%>
<!--                     <div class="controls"> -->
<%--                         <form:input path="address.postalCode" id="address.postalCode"/> --%>
<!--                     </div> -->
<!--                 </fieldset> -->
<!--                 <fieldset class="control-group"> -->
<%--                     <appfuse:label styleClass="control-label" key="user.address.country"/> --%>
<!--                     <div class="controls"> -->
<%--                         <appfuse:country name="address.country" prompt="" default="${user.address.country}"/> --%>
<!--                     </div> -->
<!--                 </fieldset> -->
<!--             </div> -->
<!--         </fieldset> -->
        <fieldset class="form-actions">
            <button type="submit" class="btn btn-large btn-primary" name="save" onclick="bCancel=false">
                <i class="icon-ok icon-white"></i> <fmt:message key="button.register"/>
            </button>
<!--             <button type="submit" class="btn" name="cancel" onclick="bCancel=true"> -->
<%--                 <i class="icon-remove"></i> <fmt:message key="button.cancel"/> --%>
<!--             </button> -->
        </fieldset>
    </form:form>
</div>

<v:javascript formName="user" staticJavascript="false" htmlComment="false"/>
<script type="text/javascript" src="<c:url value="/scripts/validator.jsp"/>"></script>
<script type="text/javascript">
	$(document).ready(function() {
       // $("input[type='text']:visible:enabled:first", document.forms['signupForm']).focus();
		$('#dob').datepicker({
			startView:2
				});
		
    });
</script>

